<template>
  <view class="container">
    <view class="login-container">
      <view class="input-group">
        <input type="text" v-model="username" placeholder="请输入用户名" />
      </view>
      <view class="input-group">
        <input type="password" v-model="password" placeholder="请输入密码" />
      </view>
      <button @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      // 这里可以添加登录逻辑，比如调用API发送请求
      console.log('登录', this.username, this.password);
      // 模拟登录成功
      uni.showToast({
        title: '登录成功',
        icon: 'success',
      });
      uni.switchTab({
        url: '/pages/mine/mine'
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使用100vh确保容器高度占满整个视口 */
  background-image: url('/static/780.jpg'); /* 设置背景图片 */
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中显示 */
}

.login-container {
  width: 80%;
  max-width: 400px; /* 设置最大宽度，防止在大屏幕上过宽 */
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 设置背景颜色，增加透明度 */
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 15px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #007aff;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
</style>